<template>
	<div class="login_container">
		<span style="font-size:45px ;font-family:宋体; font-weight: 800; position: absolute;
			left: 34%;top: 14%;color: black;
		 ">欢迎使用数计学院投票系统</span>
		<!-- 登录盒子-->
		<div class="login_box">
			<!-- 头像盒子-->
			<div class="img_box">
				<img src="./assets/sxlgdxxh.png" />
			</div>

			<!-- 登录表单-->
			<div style="margin-top: 100px ; padding-right: 20px;">
				<el-form ref="form" label-width="80px">

					<el-form-item label="账号">
						<el-input v-model="account"></el-input>
					</el-form-item>

					<el-form-item label="密码">
						<el-input v-model="password" show-password></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="login()">登录</el-button>
						<el-button type="primary" @click="Managelogin()">管理员登录</el-button>
            <el-button type="primary" @click="sign()">普通用户注册</el-button>
					</el-form-item>
				</el-form>
			</div>

		</div>
	</div>
</template>

<script>
	/* 导出组件,并为组件定义数据,函数,生命周期函数 */
	export default {
		data() {
			return {
				account: '',
				password: ''
			}
		},
		methods: {
      sign(){
        this.$router.push("/sign")
      },
			Managelogin() {
				if (this.account.length == 0) {
					this.$message({
						message: '账号不能为空',
						type: 'warning'
					});
					return;
				}
				if (this.password.length == 0) {
					this.$message({
						message: '密码不能为空',
						type: 'warning'
					});
					return;
				}

				//与后端交互
				if (this.account.length == 0 || this.password.length == 0) {
					this.$message({
						message: '账号或密码输入有误',
						type: 'warning'
					})
					return;
				}
				this.$http.post("manageLogin", "account=" + this.account + "&password=" + this.password).then((resp) => {
							if (resp.data.code == 200) {
								sessionStorage.setItem("Roleuser", "admin") //会话期间存储,关闭浏览器后,数据就会消失
								sessionStorage.setItem("account", resp.data.obj.account) //会话期间存储,关闭浏览器后,数据就会消失
								sessionStorage.setItem("token", resp.data.obj.token) //会话期间存储,关闭浏览器后,数据就会消失
								// localStorage.setItem("account",resp.data.account)//本地存储,即使关闭浏览器,下次大概还是存在
								// 根据后端回应进行处理
								this.$router.push("/ManageInfo")
							}
							
						})
					},
					//验证账号和密码不能为空
				login() {
						if (this.account.length == 0) {
							this.$message({
								message: '账号不能为空',
								type: 'warning'
							});
							return;
						}
						if (this.password.length == 0) {
							this.$message({
								message: '密码不能为空',
								type: 'warning'
							});
							return;
						}
						//与后端交互
						if (this.account.length == 0 || this.password.length == 0) {
							this.$message({
								message: '账号或密码输入有误',
								type: 'warning'
							})
							return;
						}
						this.$http.post("login", "account=" + this.account + "&password=" + this.password).then((resp) => {
							if (resp.data.code == 200) {
								sessionStorage.setItem("Roleuser", "user") //会话期间存储,关闭浏览器后,数据就会消失
								sessionStorage.setItem("account", resp.data.obj.id) //会话期间存储,关闭浏览器后,数据就会消失
								sessionStorage.setItem("name", resp.data.obj.name) //会话期间存储,关闭浏览器后,数据就会消失
								sessionStorage.setItem("token", resp.data.obj.token) //会话期间存储,关闭浏览器后,数据就会消失
								// localStorage.setItem("account",resp.data.account)//本地存储,即使关闭浏览器,下次大概还是存在
								// 根据后端回应进行处理
								this.$router.push("/info")
							}
							// 前端浏览器中存储用户信息

						})
					}
			}
		}
</script>

<style>
	.login_container {
		height: 100vh;
		margin: 0px;
		padding: 0px;
		background-image: url(assets/is.jpg);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.login_box {
		width: 450px;
		height: 350px;
		background-color: #fff;
		border-radius: 10px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		opacity: 0.85;
	}

	.img_box {
		width: 130px;
		height: 130px;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 50%;
		padding: 5px;
		border: 1px solid #eee;
	}

	.img_box img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #eee;
	}
</style>